import React, { useMemo } from 'react';
import { useDnD } from '../DnDContext';
import { getListPdfNodeType } from './design';
export const Sidebar = () => {
    const [, setType] = useDnD();
    const onDragStart = (event: any, nodeType: any) => {
        setType?.(nodeType);
        event.dataTransfer.effectAllowed = 'move';
    };
    const dndNodes = useMemo(() => {
        return getListPdfNodeType();
    }, []);
    return (
        <aside >
            <div
                className="dndflow"
                style={{
                    display: "flex",
                    flexDirection: "column",
                    overflow: "hidden",
                    height: "100%"
                }}
            >
                {
                    dndNodes.map(m => {
                        return <div className="dndnode" key={m.name} onDragStart={(event) => onDragStart(event, `${m.name}`)} draggable>
                            {m.displayName}
                        </div>
                    })
                }
            </div>
        </aside>
    );
};